<template>
    <div>
        <h3>{{name}}.props</h3>
        <div class='api-table'>
            <Row>
                <Col span='5'>属性</Col>
                <Col span='8' >描述</Col>
                <Col span='3' >类型</Col>
                <Col span='3' >是否必须</Col>
                <Col span='3' >默认值</Col>
            </Row>
            <Row v-for='(v,key) in propList' :key='key'>
                <Col span='5'>{{key}}</Col>
                <Col span='8' >{{v.desc||'-'}}</Col>
                <Col span='3' >{{v.type?Array.isArray(v.type)?v.type.map(i=>i.name).join(' | '):v.type.name:'Object'}}</Col>
                <Col span='3' >{{v.required||'false'}}</Col>
                <Col span='3' >{{getDef(v)}}</Col>
            </Row>
        </div>
    </div>
</template>
<script>
export default {
    name:'props',
    props:{
        element:{
            desc:'Vue Instance',
            type:Object,
            require:true,
        }
    },
    data(){
        return {
            name:'#',
            propList:{},
            cols:{
                'key':'属性',
                'desc':'描述',
                'type':'类型',
                'required':'是否必须',
                'default':'默认值',
            }
        }
    },
    mounted(){
        this.name = this.element.name;
        if(this.element.props){
            this.propList = this.element.props;
        }
        this.$forceUpdate();
    },
    methods:{
        getDef(s){
            var t2 = s.default;
            return t2?(typeof t2 == 'function'?t2.apply(this):t2):null;
        }
    }
}
</script>
<style lang="less" scoped>
    .api-table {
        padding:10px; 
    }
</style>


